<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主页面搜索栏</title>
    <!-- 移动设备优先 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- BS4依赖 -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery-3.4.0.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <!-- json依赖 -->
    <script src="js/json2.js"></script>
    <script>
        // 搜索框设计思路：单击搜索按钮，获取用户输入，然后通过get传递请求给cateList.html
        // cateList.html负责：获得参数，启动Ajax向后端发起请求，得到后端返回的数据进行渲染
        // 需要注意的是：在其它页面使用load()函数后，两个页面合并可能会产生id冲突导致获取不到属性值
        function getSearch() {
            var key = $("#searchKey").val();
            // === 先判断类型
            // 如此，就可以通过同一个链接cateList.html有不同效果，一是非空，而是默认显示
            if (key == null || key === "") {
                alert("输入不能为空~");
                return;
            }
            window.location.href = "cateList.html?cateName=" + encodeURI(key);
        };
    </script>
</head>
<body>
<div class="container-fluid mb-2" style="margin-top: 66px;">
    <div class="row">
        <div class="col-1"></div>
        <div class="col-10">
            <nav class="navbar navbar-expand-sm navbar-light justify-content-between">
                <ul class="navbar-nav">
                    <li class="nav-item active">
                        <a class="nav-link" href="main.html">食货志</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="main.html">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="cateList.html">美食</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">餐馆</a>
                    </li>
                </ul>
                <form class="form-inline">
                    <input id="searchKey"  class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                    <button id="searchBtn" class="btn btn-outline-success my-2 my-sm-0" type="button" onclick="getSearch()">搜索</button>
                </form>
            </nav>
        </div>
        <div class="col-1"></div>
    </div>
</div>

</body>
</html>